<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
  <title>Thrive Mobile Application</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

  <!--- Some jquery stuff --->
	<link rel="stylesheet" href="../../scripts/jquery.mobile-1.0.1/jquery.mobile-1.1.0-rc.1.min.css" type="text/css" />
    <link rel="stylesheet" href="../../scripts/jquery.mobile-1.0.1/thrive-theme.css" type="text/css">
    <script src="../../scripts/jquery.mobile-1.0.1/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="../../scripts/jquery.mobile-1.0.1/jquery.mobile-1.1.0-rc.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../../css/style.css" type="text/css" />
</head>

<body>
    	
    <div id="gatherBasket" data-role="page" data-theme="a">
    
		<script type="text/javascript">		
			var basketCtx;
			var fruitImageBasket = new Array();
			var basketWidth;
			var basketHeight;
			var basketImageSize = 30;
			var basketBasketBack = new Image();
			
			$("#gatherBasket").live('pagebeforeshow', function() {
				initBasket(45);
			});
			
			$(window).resize(function() {
				$('#basketCanvas')[0].width = window.innerWidth;
				$('#basketCanvas')[0].height = window.innerHeight - 48;
				basketCtx = $('#basketCanvas')[0].getContext("2d");
				basketWidth = $('#basketCanvas')[0].width;
				basketHeight = $('#basketCanvas')[0].height;
				basketImageSize = Math.floor(basketWidth / 10);
				
				basketCtx.clear(0,0,basketWidth,basketHeight);
				
				basketDrawFruit(45);
				
				drawCanvas();
				$("#basketCanvas").trigger("create");
			});
					
			function initBasket(num) {
				$('#basketCanvas')[0].width = window.innerWidth;
				$('#basketCanvas')[0].height = window.innerHeight - 48;
				basketCtx = $('#basketCanvas')[0].getContext("2d");
				basketWidth = $('#basketCanvas')[0].width;
				basketHeight = $('#basketCanvas')[0].height;
				basketImageSize = Math.floor(basketWidth / 10);

				basketDrawFruit(num);
    		};
			
			function basketDrawFruit(num) {
				basketBasketBack.src = "thriveapp_basket_back.png";
				basketCtx.drawImage(basketBasketBack, 0, basketHeight - basketImageSize*2, basketWidth, basketImageSize*2);
				
				for (i = 0; i < num; i++) {
					fruitImageBasket[i] = new Image();
					fruitImageBasket[i].src = "thriveapp_fruit_" + (Math.floor(Math.random()*6)) + ".png";
					basketCtx.drawImage(fruitImageBasket[i], basketImageSize/2 + basketImageSize*(i % 9), basketWidth - basketImageSize*(1 + Math.floor(i / 9)), basketImageSize, basketImageSize);
				}
			}
			
		</script>
	
	<div data-role="header" data-theme="a">
    	<a href="../../index.html" data-role="button" data-icon="arrow-l">Thrive</a>
        <h1>Gather</h1>
    </div>
    
    <div data-role="content" data-theme="a">
		<canvas id="basketCanvas"></canvas> 
    </div>
    </div>
</body>

</html>
